<template>
	<div class="result">
		<el-carousel trigger="click" :autoplay="false" :interval="intervalTime" height="100vh" style="width: 100%;" @change="carouselChange">
			<el-carousel-item>
				<div class="muwei">
					<!-- <div class="muweiF1 muweiF1Bg1">
						<div class="muweiF1-text-1">
							<img src="@/assets/logo2.png" class="my-img" />
							<div>利川市殡仪馆</div>
						</div>
						<div>殡葬服务项目及收费标准</div>
						<div class="muweiF1-text-2">{{ nowDate }}</div>
					</div> -->
					<ServiceProjects2 />
				</div>
			</el-carousel-item>

			<!-- <el-carousel-item>
				<div class="muwei">
					<div class="muweiF1 muweiF1Bg1">
						<div class="muweiF1-text-1">
							<img src="@/assets/logo.png" class="my-img" />
							<div>利川市殡仪馆</div>
						</div>
						<div>政策查询</div>
						<div class="muweiF1-text-2">{{ nowDate }}</div>
					</div>
					<Policy :isScroll="isScroll1" />
				</div>
			</el-carousel-item> -->
			

		</el-carousel>
		
		<!-- <div style="position: fixed;bottom: 50px;left: 50px;font-size: 60px;cursor: pointer;" class="iconfont icon-fanhui" @click="back"></div> -->
	</div>
</template>

<script>
import '@/assets/font/iconfont.css'
import About from '@/components/About.vue'
import ServiceInquiry from '@/components/ServiceInquiry.vue'
import ServiceList from '@/components/ServiceList.vue'
import ProductList from '@/components/ProductList.vue'
import ServiceProductList from '@/components/ServiceProductList.vue'

import Complain from '@/components/Complain.vue'
import FuneralNotice from '@/components/FuneralNotice.vue'
import Policy from '@/components/Policy.vue'
import Map from '@/components/Map.vue'
import FuneralProcess from '@/components/FuneralProcess.vue'
import ServiceProjects2 from '@/components/ServiceProjects2.vue'

import { getDateTime } from '@/utils/utils'
export default {
	name: 'Resutl',
	components: {
		About,
		ServiceInquiry,
		ServiceList,
		ProductList,
		ServiceProductList,
		Complain,
		FuneralProcess,
		FuneralNotice,
		Policy,
		Map,
		ServiceProjects2,
	},
	data(){
		return{
			nowDate: '',
			
			isScroll1: false,
			isScroll2: false,
			isScroll3: false,
			isScroll6: false,
			isScroll7: false,
			isScroll8: false,
			isScroll9: false,
			intervalTime: 10000,
		}
	},
	created() {
		this.nowDate = getDateTime()

		setInterval(() => {
			this.nowDate = getDateTime()
		}, 1000 * 60);
	},
	mounted() {
		// this.isScroll6 = true
	},
	beforeDestroy() {
	},
	methods:{
		carouselChange(index) {
			// if (index == 0) {
			// 	this.intervalTime = 117000
			// 	this.isScroll6 = true
			// } else {
			// 	this.isScroll6 = false
			// }
			// if (index == 1) {
			// 	this.intervalTime = 117000
			// 	this.isScroll7 = true
			// } else {
			// 	this.isScroll7 = false
			// }
			// if (index == 2) {
			// 	this.intervalTime = 56000
			// 	this.isScroll8 = true
			// } else {
			// 	this.isScroll8 = false
			// }
			// if (index == 4) {
			// 	this.intervalTime = 420000
			// 	this.isScroll2 = true
			// } else {
			// 	this.isScroll2 = false
			// }
			// if (index == 5) {
			// 	this.intervalTime = 215000
			// 	this.isScroll9 = true
			// } else {
			// 	this.isScroll9 = false
			// }
			// if (index == 6) {
			// 	this.intervalTime = 1890000
			// 	this.isScroll1 = true
			// } else {
			// 	this.isScroll1 = false
			// }
			// if (index == 7) {
			// 	this.intervalTime = 130000
			// 	this.isScroll3 = true
			// } else {
			// 	this.isScroll3 = false
			// }
			// if (index == 3 ||index == 8 || index == 9) {
			// 	this.intervalTime = 20000
			// } 

		},
		back(){
			this.$router.back()
		},
	}
}
</script>
<style scoped lang="scss">
	.result{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
	}
	.result::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../assets/bg1.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		filter: blur(10px);
		z-index: -1;
	}
	.muwei{
		height: 100%;
		// background-color: #fff;
		background-color: rgb(38, 80, 144);
		display: flex;
		flex-direction: column;
		.muweiF1{
			font-size: 50px;
			width: 100%;
			position: relative;
			z-index: 1000;
			display: flex;
			justify-content: space-around;
			.muweiF1-text-1, .muweiF1-text-2 {
				display: flex;
				align-items: center;
				font-size: 30px;
			}
			
			.my-img {
				width: 50px;
				height: 50px;
				margin-right: 10px;
			}
		}
		.muweiF1Bg1{
			color: #FFF;
			background-color: #66b1ff;
		}
		
		#mwContent {
			overflow: scroll;
			flex: 1;
		}
		.tableClass{
			font-size: 70px;
			letter-spacing: 5px;
		}
	}
	::v-deep .el-table th.el-table__cell, ::v-deep .el-table tr  {
		background-color: rgb(38, 80, 144);
		color: #fff;
	}
	
	::v-deep .el-table .cell {
		line-height: 120px;
	}
	.mw-content {
		// background: #fff;
		background-color: rgb(38, 80, 144);
		position: relative;
		font-size: 60px;
		letter-spacing: 5px;
		text-align: left;
		.el-row {
			padding: 20px;
			border-bottom: 1px solid #409EFF;
			.el-col {
				border-left: 1px solid #409EFF;
				border-right: 1px solid #409EFF;
			}
		}
	}
	// ::v-deep .el-carousel__item  {
	// 	width: 100vw;
	// 	height: 100vh;
	// }

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0 !important;
	}
	/* 滚动条背景颜色 */
	::-webkit-scrollbar {
		background-color: 0 !important;
	}
</style>
